<!--
 * @Author: your name
 * @Date: 2021-08-17 15:47:32
 * @LastEditTime: 2021-08-22 09:08:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\网易严选\wangyiyanxuan.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选</title>
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2746366_i4inrt8jvi.css">
    <link rel="stylesheet" href="./wangyiyanxuan.css">
</head>
<body>
    <!-- header -->
    <div class="header">
        <!-- top -->
        <div class="top">
            <!-- 固定宽度显示内容 -->
            <div class="wapper">
                <div class="left">
                    <i class="iconfont icon-gonggao-copy"></i>
                    <a href="">因事件（疫情、特大暴雨、台风）影响，部分地区无法配送公告</a>
                    
                </div>
                <div class="right">
                    <div>
                        <div><a href="">登录/注册</a></div>
                    </div>
                    <div>
                    <div>
                        <a href="">我的订单</a></div>
                    </div>
                    <div>
                        <div><a href="">会员</a></div>
                    </div>
                    <div>
                        <div><a href="">甄选家</a></div>
                    </div>
                    <div>
                        <div>
                            <a href="">企业采购
                                <i class="iconfont icon-arrow-down"></i>
                            </a>
                        </div>
                    </div>
                    <div>
                        <div>
                            <a href="">客户服务
                                <i class="iconfont icon-arrow-down"></i>
                            </a>
                        </div>
                    </div>
                    <div>
                        <div>
                            <a href="">
                                <i class="iconfont icon-shouji"></i>
                                APP
                            </a>
                        </div>
                    </div>    
                </div>
            </div>
            <!-- 固定显示内容结束 -->
        </div>
        <!-- top结束 -->
        <!-- bottom -->
        <div class="bottom">
            <div class="wapper">
                <!-- search -->
                    <div class="search">
                        <div class="logo">
                            <img src="./img/logopng.png" alt="logo丢失">
                        </div>
                        <div class="sousuo">
                            <div>
                                <div class="search_top">
                                    <i class="iconfont icon-sousuo "></i>
                                    <input type="text">
                                    <span class="but_text">搜索</span>
                                </div>
                                <div class="search_bottom">
                                    <a href="">七夕礼物</a>
                                </div>
                            </div>
                        </div>
                        <div class="shopcar">
                            <div class="car">
                                <i class="iconfont icon-chat-blue"></i>
                                <span>购物车</span>
                                <i class="iconfont icon-0"></i>
                            </div>
                        </div>
                    </div>
                <!-- search结束 --> 
                <!-- menu -->
                <div class="menu">
                    <ul>
                    <li class="menu_item">
                        <a>首页</a>
                    </li>
                    <li class="menu_item">
                        <a>居家生活</a>
                        <div class="sub_menu">
                            <div class="pro">床品套件</div>
                            <div class="pro">被枕褥毯</div>

                        </div>
                    </li>
                    <li class="menu_item">
                        <a>服饰鞋包</a>
                        <div class="sub_menu">
                            <div class="pro">居家内搭</div>
                            <div class="pro">珠宝配饰</div>
                            <div class="pro">男鞋</div>
                            <div class="pro">女鞋</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>美食酒水</a>
                        <div class="sub_menu">
                            <div class="pro">美食酒水二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>个护清洁</a>
                        <div class="sub_menu">
                            <div class="pro">个护清洁二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>母婴亲子</a>
                        <div class="sub_menu">
                            <div class="pro">母婴亲子二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>运动旅行</a>
                        <div class="sub_menu">
                            <div class="pro">运动旅行二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>数码家电</a>
                        <div class="sub_menu">
                            <div class="pro">数码家电二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>严选全球</a>
                        <div class="sub_menu">
                            <div class="pro">严选全球二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>为你严选</a>
                        <div class="sub_menu">
                            <div class="pro">为你严选二级菜单列表</div>
                        </div>
                    </li>
                    <li class="menu_item">
                        <a>众筹</a>
                        <div class="sub_menu">
                            <div class="pro">众筹二级菜单列表</div>
                        </div>
                    </li>
                    </ul>
                </div>
                <!-- menu结束 -->
            </div>
            
        </div>
        <!-- bottom结束 -->
    </div>
    <!-- header结束 -->
    <!-- content -->
    <div class="content">
        <!-- 轮播图 -->
        <div class="lunbo">
            <img src="./img/lunbo.webp" alt="">
        </div>
        <!-- 轮播图结束 -->
        <!-- 热销榜 -->
        <div class="hot_outer">
            <ul class="hot_goods">
                <li>-热销榜-</li>
                <li><img src="./img/全站热销榜.webp" alt=""><span>全站<br>热销榜</span></li>
                <li><img src="./img/1居家生活.webp" alt=""><span>居家<br>生活榜</span></li>
                <li><img src="./img/1数码家电.webp" alt=""><span>数码<br>家电榜</span></li>
                <li><img src="./img/1母婴亲子.webp" alt=""><span>母婴<br>亲子榜</span></li>
                <li><img src="./img/1美食酒水.webp" alt=""><span>美食<br>酒水榜</span></li>
                <li><img src="./img/1运动旅行.webp" alt=""><span>运动<br>旅行榜</span></li>
                <li><img src="./img/1个护清洁.webp" alt=""><span>个护<br>清洁榜</span></li>
                <li><img src="./img/1服饰鞋包.webp" alt=""><span>服饰<br>鞋包榜</span></li>
                <li><img src="./img/1全球特色.webp" alt=""><span>全球<br>特色榜</span></li>
            </ul>
        </div>
        <!-- 热销榜结束 -->
        <!-- 新品首发 -->
        <div class="xpsf">
            <div class="wapper">
                <div class="new">
                    <div class="title">
                        <h3 class="name">新品首发</h3>
                        <div class="headerLeft">为你寻觅世间好物</div>
                        <div class="headerRight">更多新品
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="product">
                        <ul class="p_list">
                            <li class="xp">
                                <div class="photo">
                                    <div class="photo_list">
                                        <img src="./img/11.jpg" alt="">
                                        <img src="./img/12.jpg" alt="">
                                    </div>
                                </div>
                                <div class="title">
                                    <div class="prdtTags">
                                        <span>特价</span>
                                    </div>
                                    <h4 class="name">
                                        可以吃的“冻干酥脆咖啡”，咖啡饼干 340克
                                    </h4>
                                    <p class="price">¥13.9
                                        <span>¥19.9</span>
                                    </p>
                                </div>                                
                            </li>
                            <li class="xp">
                                <div class="photo">
                                    <div class="photo_list">
                                        <img src="./img/21.jpg" alt="">
                                        <img src="./img/22.jpg" alt="">
                                    </div>
                                </div>
                                <div class="title">
                                    <div class="prdtTags">
                                        <span>特价</span>
                                    </div>
                                    <h4 class="name">
                                        酸爽多汁，智利进口香水柠檬
                                    </h4>
                                    <p class="price">¥19.9
                                        <span>¥29</span>
                                    </p>
                                </div>                                
                            </li>
                            <li class="xp">
                                <div class="photo">
                                    <div class="photo_list">
                                        <img src="./img/31.jpg" alt="">
                                        <img src="./img/32.jpg" alt="">
                                    </div>
                                </div>
                                <div class="title">
                                    <div class="prdtTags">
                                        <span>3件8.5折</span>
                                    </div>
                                    <h4 class="name">
                                        蜂蜜般流心，大颗土耳其杏肉
                                    </h4>
                                    <p class="price">¥16.9
                                        <span>¥19</span>
                                    </p>
                                </div>                                
                            </li>
                            <li class="xp">
                                <div class="photo">
                                    <div class="photo_list">
                                        <img src="./img/41.jpg" alt="">
                                        <img src="./img/42.jpg" alt="">
                                    </div>
                                </div>
                                <div class="title">
                                    <div class="prdtTags">
                                        <span>特价</span>
                                        <span>满赠</span>
                                    </div>
                                    <h4 class="name">
                                        酒局救星，千杯膏 120克（10克*12袋）
                                    </h4>
                                    <p class="price">¥98
                                        <span>¥139</span>
                                    </p>
                                </div>                                
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新品首发结束 -->
        <!-- 人气推荐 -->
        <div class="rqtj">
            <div class="wapper">
                <div class="popularity">
                    <div class="title">
                        <h3 class="name">人气推荐</h3>
                        <div class="headerLeft checked">编辑推荐</div>
                        <div class="headerLeft">热销总榜</div>
                        <div class="headerRight">更多推荐
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="product">
                        <div id="productItemFirst" class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img
                                src="https://yanxuan-item.nosdn.127.net/bebff6d69027991f02077dc1f249059f.png?type=webp&quality=95&thumbnail=320x320&imageView"
                                alt="图片丢失">
                            <div class="title">
                                <h4 class="name">口袋里的咖啡馆 浓缩胶囊咖啡 焦糖拿铁1袋</h4>
                                <p class="price">¥21.8</p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/0736325df88942d67a31b5bd5bb2a502.png?type=webp&quality=95&thumbnail=180y180&imageView" 
                            alt="图片丢失">
                            <div class="title">
                                <div class="prdtTags">
                                    <span>3件8.5折</span>
                                </div>
                                <h4 class="name">
                                    无添加蔗糖，苏打饼干 360克
                                </h4>
                                <p class="price">¥12.8
                                    <span>¥88</span>
                                </p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/48ac6244d402c23e813f2099726fd08e.png?type=webp&quality=95&thumbnail=320x320&imageView" 
                            alt="图片丢失">
                            <div class="title">
                                <div class="prdtTags">
                                    <span></span>
                                </div>
                                <h4 class="name">不含酒精，使用安心 爽肤清洁湿巾</h4>
                                <p class="price">¥17.9</p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/6b9d93eae44995e560bcaf9154becee4.png?type=webp&quality=95&thumbnail=180y180&imageView" 
                            alt="图片丢失">
                            <div class="title">
                            <div class="prdtTags">
                                    <span>2件7折</span>
                                </div>
                                <h4 class="name">惊喜藏在蛋黄里，翻砂卤蛋 245克</h4>
                                <p class="price">¥12.8
                                    <span>¥30</span>
                                </p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/50055a82fd4b03c81118f5bdde7c550c.png?type=webp&quality=95&thumbnail=180y180&imageView"
                            alt="图片丢失">
                            <div class="title">
                                <div class="prdtTags">
                                    <span></span>
                                </div>
                                <h4 class="name">新装上市，专属牧场纯牛奶 250毫升*24盒 </h4>
                                <p class="price">¥88</p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/498486dcb3695ae290e25a3a729b3b22.png?type=webp&quality=95&thumbnail=180y180&imageView" 
                            alt="图片丢失">
                            <div class="title">
                                <div class="prdtTags">
                                    <span>2件75折</span>
                                </div>
                                <h4 class="name">口袋里的咖啡馆 浓缩胶囊咖啡液 微糖1袋</h4>
                                <p class="price">¥21.8
                                    <span>¥50</span>
                                </p>
                            </div>
                        </div>
                        <div class="productItem">
                            <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                            <img src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView" 
                            alt="图片丢失">
                            <div class="title">
                                <div class="prdtTags">
                                    <span>99选9</span>
                                </div>
                                <h4 class="name">红杏干 180克</h4>
                                <p class="price">¥20</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 人气推荐结束 -->
        
    </div>
    <!-- content结束 -->
    <!-- footer -->
    <div class="footer">

    </div>
    <!-- footer结束 -->
</body>
</html>
